<template>
  <div id="system-setup-data-management" class="system-setup-data-management">
    <el-container class="nav-box">
      <el-header>
        <el-row>
          <el-col class="logo-box" :span="6">
            <icon-font
              class="nav-logo"
              style="visibility: hidden"
              icon="icon-global-001"
            />
            <span class="logo-name">
              <img :src="active_logo" alt="logo" />
            </span>
          </el-col>
          <el-col :span="18" class="user-info" style="padding-right: 16px">
            <el-dropdown v-if="positionList.length">
              <div class="el-dropdown-link position">
                <div class="positionInfo">
                  <span>{{ positionCompanyName || companyName || '' }}</span>
                  <span>{{ positionName || '' }}</span>
                </div>
                <i
                  v-if="positionList.length"
                  class="el-icon-arrow-down el-icon--right"
                />
              </div>
              <el-dropdown-menu v-if="positionList.length" slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in positionList"
                  :key="index"
                  style="
                    display: flex;
                    flex-direction: column;
                    text-align: right;
                  "
                  @click.native="choosePosition(item.companyId)"
                >
                  <span>{{ item.companyName }}</span>
                  <span>{{ item.positionName }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- 用户信息，修改密码 -->
            <el-dropdown @command="handleDropdown">
              <span class="el-dropdown-link">
                {{ $store.state.userName || '--' }}
                <i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                <el-dropdown-item
                  v-if="positionId === '0'"
                  command="enterPriseCenter"
                  >企业中心</el-dropdown-item
                >
                <el-dropdown-item command="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          class="el-breadcrumb-style"
        >
          <el-breadcrumb-item class="text-style" :to="{ path: '/' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/enterpriseCenter' }"
            >企业中心</el-breadcrumb-item
          >
          <el-breadcrumb-item id="last-breadcrumb-item"
            >数据接口授权</el-breadcrumb-item
          >
        </el-breadcrumb>
        <div class="system-classify-box">
          <div class="_head">
            <p>
              <i class="new-icon iconpc-other_sjjksq1x"></i>
              数据接口授权
              <el-tooltip
                class="item"
                effect="dark"
                content="数据接口授权用于本平台用户数据对接外部系统，进行数据传输时，进行授权使用。经授权的数据才会传输给外部系统。如果用户需要添加传输接口，请联系平台客服。"
                placement="bottom-start"
              >
                <!-- <icon-font icon="iconicon-Maintenancetime"></icon-font> -->
                <svg
                  class="icon-font"
                  aria-hidden="true"
                  style="width: 14px; height: 14px"
                >
                  <use xlink:href="#iconpc-alert_tishi1x" />
                </svg>
              </el-tooltip>
            </p>
          </div>
          <el-editable
            :data="dataManagementList"
            height="600"
            class="table-content"
            :columns="config.dutyManageColumns"
          >
            <template slot="default-syncType" slot-scope="scope">
              <div>{{ config.syncTypeMap[scope.row.syncType] }}</div>
            </template>
            <template slot="default-sendTemplateName" slot-scope="scope">
              <div class="send-template">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.sendTemplateName"
                  placement="top"
                >
                  <span class="send-template-name">{{
                    scope.row.sendTemplateName
                  }}</span>
                </el-tooltip>
                <div>
                  <el-tooltip
                    class="item down-load"
                    effect="dark"
                    content="下载"
                    placement="top"
                  >
                    <icon-font
                      icon="iconpc-other_xinxiazai1x"
                      @click.native="downLoad(scope.row)"
                    ></icon-font>
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="预览"
                    placement="top"
                  >
                    <icon-font
                      icon="iconpc-other_chakan1x"
                      @click.native="previewFile(scope.row)"
                    ></icon-font>
                  </el-tooltip>
                </div>
              </div>
            </template>
            <template slot="default-operation" slot-scope="scope">
              <div>
                <span
                  class="swich"
                  :class="{
                    open: scope.row.switchStatus === 1,
                    close: scope.row.switchStatus === 0,
                  }"
                  @click="changeSwichStatus(scope.row)"
                  v-text="getSwichText(scope.row)"
                ></span>
              </div>
            </template>
          </el-editable>
        </div>
      </el-main>
    </el-container>
    <el-dialog
      title="初始化提示"
      :visible.sync="dialogInitVisible"
      width="388px"
      class="dialog-init-container"
      :before-close="handleClose"
    >
      <div>
        <div class="content">
          <div class="icon-content">
            <i class="m-pc-public m-pc-public_tishiwarning"></i>
          </div>
          <div>
            <p class="dialog-title-message">首次传输是否同步历史信息</p>
            <p class="dialog-title-content">
              首次传输历史信息，将传输所有相关历史信息，第二次开始传输每日信息
            </p>
          </div>
        </div>
        <div class="footer">
          <el-button class="cancel-btn" @click="cancelInit">不同意</el-button>
          <el-button type="primary" class="confirm-btn" @click="confirmInit"
            >同意</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import ElEditable from '@components/el-editable/door/index.vue';
import { hasIn } from 'lodash';
import { fileDownload } from '@const/utils.js';
import { ossDownload } from '@const/aggreationCentApi.js';
import { $loadFileSimply } from '@const/loadFileOps'; // 下载文件的方法
import {
  resMcPolicyDataSyncPageList,
  resMcPolicyDataSyncUpdateById,
} from '@const/markCentApi.js';
import pcCaiseLogo from '@assets/img/login/pc-caise-logo.png';
import * as config from './const';

export default {
  components: { ElEditable },
  layout: 'blank',
  data() {
    return {
      dialogInitVisible: false,
      config,
      active_logo: pcCaiseLogo,
      dataManagementList: [], // table的数据
      dialogInitData: {},
    };
  },
  computed: {
    ...mapState([
      'positionCompanyName',
      'companyName',
      'companyId',
      'positionName',
      'positionList',
      'positionId',
    ]),
  },
  mounted() {
    if (!this.positionList.length) this.$store.dispatch('getPositionList');
    this.getResMcPolicyDataSyncPageList();
  },
  methods: {
    getResMcPolicyDataSyncPageList() {
      this.$axios({
        method: 'POST',
        url: resMcPolicyDataSyncPageList,
        data: {},
      }).then((res) => {
        const content = hasIn(res, ['data', 'payload', 'content'])
          ? res.data.payload.content
          : [];
        this.dataManagementList = content;
      });
    },
    getSwichText(data) {
      return data.switchStatus === 1 ? '开启' : '关闭';
    },
    // 返回首页
    home() {
      const curCompanyId = this.$store.state.companyId;
      if (curCompanyId === '0') {
        this.$router.push('/business');
      } else {
        this.$router.push('/');
      }
    },
    // 请求同步数据接口前处理请求数据
    getInitRequestData(data, type) {
      const requestData = {
        id: data.id,
        switchStatus: data.switchStatus === 0 ? 1 : 0,
        syncHistoryData: type,
      };
      return requestData;
    },
    // 开启统一操作
    resMcPolicyDataSyncUpdateById(data, type) {
      const requestData = this.getInitRequestData(data, type);
      this.$axios({
        url: resMcPolicyDataSyncUpdateById,
        method: 'POST',
        data: requestData,
      })
        .then((res) => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: '修改成功',
            });
            this.getResMcPolicyDataSyncPageList();
          }
        })
        .finally(() => {
          if (data.switchStatus === 0) {
            this.handleClose();
          }
        });
    },
    // 取消同步
    cancelInit() {
      this.resMcPolicyDataSyncUpdateById(this.dialogInitData, 0);
    },
    // 确认同步
    confirmInit() {
      this.resMcPolicyDataSyncUpdateById(this.dialogInitData, 1);
    },
    // 切换状态
    changeSwichStatus(data) {
      // 开启
      if (data.switchStatus === 0) {
        this.dialogInitVisible = true;
        this.dialogInitData = JSON.parse(JSON.stringify(data));
        return;
      }
      // 关闭，直接走接口
      this.resMcPolicyDataSyncUpdateById(data, 0);
    },
    handleClose() {
      this.dialogInitVisible = false;
      this.dialogInitData = {};
    },
    downLoad(data) {
      const params = {
        url: `${ossDownload + data.sendTemplateOssName}`,
        method: 'get',
      };
      $loadFileSimply(params).then((res) => {
        fileDownload(res, data.sendTemplateName);
      });
    },
    choosePosition(val) {
      if (this.positionId === val) {
        this.$message.error('当前已是该岗位');
        return false;
      }
      const item = {
        positionId: val,
      };
      this.$store.dispatch('choosePosition', { item });
      return true;
    },
    previewFile(data) {
      this.$pdfViewer({ url: data.sendTemplate, title: data.sendTemplateName });
    },
    layout(command) {
      this.$store.commit(command);
      this.$router.replace(this.$PATH_CONST.login_page);
    },
    handleDropdown(command) {
      const commandJumpData = {
        logout: () => this.layout(command),
        userInfo: () => this.$router.push('/systemSetup/personal'),
        enterPriseCenter: () => this.$router.push('/enterPriseCenter'),
      };
      if (commandJumpData[command]) {
        commandJumpData[command]();
      }
    },
  },
};
</script>
<style lang="less">
.el-breadcrumb-style {
  margin: 0 auto;
  padding: 0;
  width: 1200px;
  margin-top: 13px;
  margin-bottom: 13px;

  .text-style {
    color: #999;
  }
  .is-link,
  .el-breadcrumb__inner {
    color: #999;
    font-size: 16px;
    font-weight: 400;
  }
}
.el-breadcrumb__item {
  color: #999;
  font-size: 16px;
  font-weight: 400;
}
#last-breadcrumb-item {
  font-size: 16px;
  .el-breadcrumb__inner,
  i,
  .el-breadcrumb__inner {
    color: #333;
  }
}
#system-setup-data-management {
  margin: 0;
}
.system-setup-data-management {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  .el-header {
    padding: 0 48px;
    background-color: #fff;
    .logo-box {
      display: flex;
      align-items: center;
      .nav-logo {
        font-size: 45px;
        color: rgba(35, 113, 197, 1);
        vertical-align: middle;
      }
      .logo-name {
        height: 50px;
        background-color: #fff;
        font-size: 22px;
        color: rgba(35, 113, 197, 1);
        font-weight: bold;
        cursor: default;
        display: flex;
        align-items: center;
      }
    }
    .user-info {
      text-align: right;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .el-input__inner {
        border: none;
      }
      .position {
        display: flex;
        align-items: center;
        margin-right: 15px;
        .positionInfo {
          display: flex;
          flex-direction: column;
        }
      }
      .info-company {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-right: 30px;
      }

      .icon-group {
        width: 140px;
        display: flex;
        justify-content: space-evenly;

        .icon-btn {
          cursor: pointer;
        }

        .el-badge__content {
          border: none;
        }
      }
    }
  }
  .nav-box {
    height: 100%;
    background-color: #f4f6fb;
    .el-main {
      height: calc(100vh- 60px);
      padding: 16px 48px;
      .system-classify-box {
        margin: 0 auto;
        padding: 0;
        width: 1200px;
        overflow: hidden;
        background-color: #fff;
        padding-bottom: 50px;
      }
      ._head {
        height: 56px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        // margin: 0 34px;
        box-sizing: border-box;
        // margin-bottom: 20px;
        margin: 0 0 20px 34px;
        p:first-child {
          text-align: center;
          font-size: 16px;
          color: #333333;
          i {
            color: #4d84ff;
            font-size: 18px;
          }
        }
      }
      .table-content {
        margin: 0 34px;
        display: block;
        width: calc(100% - 68px);
        // flex: 1;
        .swich {
          margin: 0;
          display: inline-block;
          position: relative;
          width: 50px;
          height: 21px;
          border: 1px solid #dcdfe6;
          outline: none;
          border-radius: 10px;
          box-sizing: border-box;
          background: #dcdfe6;
          cursor: pointer;
          color: #ffffff;
          transition: border-color 0.3s, background-color 0.3s;
          vertical-align: middle;
          line-height: 20px;
          padding: 0px 5px;
          box-sizing: border-box;
        }

        .open {
          width: 50px;
          border-color: #52c419;
          background-color: #52c419;
          font-size: 12px;
          text-align: left;
        }
        .open:after {
          content: '';
          position: absolute;
          top: 1px;
          left: 30px;
          /* left: 1px; */
          border-radius: 100%;
          transition: all 0.3s;
          width: 17px;
          height: 17px;
          background-color: #ffffff;
        }
        .close {
          width: 50px;
          border-color: #ccc;
          background-color: #ccc;
          font-size: 12px;
          text-align: right;
        }
        .close:after {
          content: '';
          position: absolute;
          top: 1px;
          // right: 1px;
          left: 1px;
          /* left: 1px; */
          border-radius: 100%;
          transition: left 0.3s;
          width: 17px;
          height: 17px;
          background-color: #ffffff;
        }
        .send-template span:hover,
        .send-template i:hover {
          color: rgb(106, 152, 248);
        }
        .send-template {
          display: flex;
          justify-content: space-between;
          .down-load {
            margin-right: 10px;
          }
          > div {
            height: 30px;
            line-height: 30px;
          }
          .send-template-name {
            display: inline-block;
            width: 150px;
            overflow: hidden;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 30px;
            line-height: 30px;
          }
        }
        .send-template i {
          font-size: 14px;
          color: rgb(176, 176, 176);
        }
      }
    }
  }

  // 表格列
  .el-table--border td,
  .el-table--border th,
  .el-table__body-wrapper
    .el-table--border.is-scrolling-left
    ~ .el-table__fixed {
    border-right: 1px solid #e6e6e6 !important;
  }

  // 隐藏表格右侧和底部边框
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: transparent;
  }
  // 隐藏右侧固定列的底部颜色
  .el-table__fixed-right::before,
  .el-table__fixed::before {
    background-color: transparent;
  }
  .el-table {
    border: none;
    // 表格行
    td,
    .el-table th.is-leaf {
      border-bottom: 1px solid #e6e6e6 !important;
    }
    tr > td:nth-child(1),
    tr > th:nth-child(1) {
      border-left: 1px solid #e6e6e6;
    }

    .editable-header-cell-class {
      height: 38px;
      padding: 5px 0;
      font-size: 14px;
      // font-weight: 400;
      font-family: PingFangSC-Medium;
      color: #333333;
      letter-spacing: 0;
      border-right: 1px solid #e6e6e6;
      border-top: 1px solid #e6e6e6;
      background: #f4f4f4;
      > div {
        cursor: pointer;
        width: 96%;
      }
      i:hover {
        color: #52c419;
      }
    }

    .editable-row-class {
      height: 38px;
      font-size: 14px;
      color: #333333;
      font-family: PingFangSC-Regular;
      > td {
        padding: 2px 0;
      }

      &:nth-child(odd):hover > td,
      &:nth-child(odd).hover-row > td,
      &:nth-child(even).hover-row > td {
        background-color: #f4f7fa;
      }

      &:nth-child(even) {
        background-color: #ffffff;
      }
    }
  }
  .dialog-init-container {
    .el-dialog__header {
      height: 48px;
      line-height: 48px;
      padding: 0 14px;
      box-sizing: border-box;
      color: #333;
      font-size: 18px;
      border-bottom: 1px solid #e6e6e6;
      .el-dialog__headerbtn {
        right: 14px;
        top: 12px;
        width: 18px;
        height: 18px;
        .el-dialog__close {
          font-size: 18px;
          color: rgb(181, 181, 181);
        }
      }
    }
    .el-dialog__body {
      padding: 20px 39px;
    }

    .el-button {
      padding: 0;
      border: none;
    }
    .el-button > span {
      display: block;
      width: 90px;
      height: 38px;
      line-height: 38px;
      font-size: 16px;
      font-weight: 400;
      background-color: #4d84ff;
      border-radius: 4px;
      border-radius: 4px;
    }
    .cancel-btn {
      margin-right: 32px;
      span {
        background: #f4f4f4;
        color: #666;
        border: 1px solid #cccccc;
      }
    }
    .cancel-btn,
    .confirm-btn {
      border-radius: 4px;
    }
    .el-button + .el-button {
      margin-left: 0;
    }
    .footer {
      text-align: center;
    }
    .content {
      display: flex;
      justify-content: space-around;
      .icon-content {
        margin-right: 14px;
        i {
          font-size: 24px;
          color: #ffba00;
        }
      }
      .dialog-title-message {
        color: #333;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 8px;
      }
      .dialog-title-content {
        color: #666;
        font-size: 14px;
        line-height: 20px;
      }
    }
    .footer {
      margin-top: 29px;
    }
  }
}
</style>
